import React from 'react';
import { DatePicker } from 'antd';
import moment from 'moment';
import ItemInput from '../itemcomponent/ItemInput';

class DateConfig extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() { }

  componentWillUnmount() { }

  getDateValue = (dateString) => {
    if (!dateString) return null;
    let date = null;
    try {
      date = moment(dateString);
    } catch (e) {
      date = null;
    }
    return date;
  }

  onDateChange = (date, dateString) => {
    const { onBlur } = this.props;
    if (onBlur && onBlur instanceof Function) {
      onBlur('defaultValue', dateString);
    }
  }

  render() {
    const {
      className = '',
      selectedItem = {},
      getInputViewValue = () => { },
      onChange = () => { },
      onBlur = () => { },
    } = this.props;
    return (
      <React.Fragment>
        <div className={className}>
          <div className='item__lable'>默认值：</div>
          <DatePicker
            onChange={this.onDateChange}
            value={this.getDateValue(selectedItem.defaultValue)}
            format='YYYY-MM-DD'
            style={{ width: '100%' }}
          />
        </div>
        <ItemInput
          className={className}
          label='提示信息：'
          maxLength={15}
          value={getInputViewValue('placeholder', selectedItem.placeholder)}
          onChange={(value) => onChange('placeholder', value)}
          onBlur={(value) => { onBlur('placeholder', value, true) }}
        />
      </React.Fragment>
    );
  }
}

export default DateConfig;